<template>
    <div>
        <top-bar title="登录" :link="link"></top-bar>
        <div class='search'>
            <div class='search-body'>
                <div class='search-label'>
                    <div class="icon-wrap"><icon type="search"></icon></div>
                    <input type="text" v-model="keyword" class="search-input" placeholder="搜索" @keyup.enter="search" @focus="onFoucs" @blur="onBlur"/>
                    <div class="icon-wrap" v-show="iconClearFlag" @click="clearWord"><icon type="clear" ></icon> </span></div>
                </div>
                <div class="load-wrap" v-show='loading'><spinner type="lines" ></spinner></div>
                <post-view :items="items" v-show='items'></post-view>
                <div class="no-result" v-show="noResult">暂无数据 :(</div>
                <div class="load-wrap" v-show="nextItemsLoading">
                    <spinner type="lines" ></spinner>
                </div>
                <div class='back-to-top' @click='backToTop' v-show="backFlag"> <icon type="download" ></icon></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import Spinner from 'vux-components/spinner'
import Icon from 'vux-components/icon'
import { PostServiceClass } from '../../services/post.js'
import '../filter/filter'
import PostView  from '../components/PostPanel/postPanel'
const post = new PostServiceClass()
export default {
    components: {
        Spinner,
        Icon,
        PostView,
    },
    data() {
        return {
            // note: changing this line won't causes changes
            // with hot-reload because the reloaded component
            // preserves its current state and we are modifying
            // its initial state
            msg: '搜索页面',
            link:{ name: 'activity' },
            items:[],
            keyword: '',
            loading:false,
            nextItemsLoading: false,
            iconClearFlag:false,
            noResult:false,
            scroll:true,
            backFlag:false
        }
    },
   route: {
    data () {
        // if(keyword === '' || keyword === undefined){

        // }
        this.items = []
        this.keyword = ''
         //滚动加载

        window.onscroll = this.onScroll

    }
  },
    methods: {
        search(e) {
            let keyword = e.target.value
            this.loading = true
            this.noResult = false
            this.backFlag = false
            this.nextItemsLoading = false
            this.items = []
            this.getItems(keyword)
        },
        async getItems(keyword) {

            if(keyword === '' || keyword === null){
                 this.items = await post.List('','','hotest')
                 // this.item= ''
            }else{
                 this.items = await post.List(keyword,'','')
            }
            this.searchProcess(this.items)

        },
        async getNextItems(){
            let items = await post.Next()
            for(let item of items)
                this.items.push(item)
            this.scroll = true
            this.nextItemsLoading = false
        },
        searchProcess(res) {
            this.loading = false
            if(res.length === 0){
                this.noResult = true
            }else{
                this.noResult = false
            }
        },
        onScroll() {

            let totalHeight = window.body.clientHeight

            if( window.scrollY > 100){
                this.backFlag = true
            }
            if( window.scrollY <= 100){
                this.backFlag = false
            }
            if((totalHeight - window.scrollY) < (window.screen.availHeight + 48)){
            if(this.scroll){
                this.scroll = false
                this.nextItemsLoading = true
                this.getNextItems()
            }
           }
        },
        backToTop(){
            window.scrollTo(0,0);
        },
        onFoucs() {
            this.iconClearFlag = true
        },
        onBlur(e) {
            // console.log(e.target);
            // this.iconClearFlag = false
        },
        clearWord(e) {
            this.keyword = ''
        }
    },
    ready(){}
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass">
    @import '~vux/dist/vux.css';
    @import '../../vendor/styles/common.scss';
    @import '../../vendor/styles/search.scss';

</style>
